<template>
	<view class="">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="container">
			<!-- 顶部区域：搜索栏和品牌专区 -->
			<view class="top-section">
				<!-- 左侧：搜索栏 -->
				<!-- 	<view class="search-section">
					<view class="section">
						<view class="search-bar">
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索商品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
				</view> -->

				<!-- 右侧：品牌专区 -->
				<view class="brand-section section">
					<view class="section-header">
						<text class="section-title">品牌专区</text>
						<!-- <text class="section-more">查看更多</text> -->
					</view>
					<scroll-view class="brand-scroll" scroll-x="true" show-scrollbar="false">
						<view class="brand-list">
							<view class="brand-item" v-for="(brand, index) in brands" :key="index">
								<image :src="brand.avatar" @click="goStore(brand)" mode="aspectFill" class="brand-logo">
								</image>
								<text class="brand-name">{{ brand.shopName }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 促销活动区域 -->
			<view class="section promotion-section">
				<view class="section-header">
					<text class="section-title">促销活动</text>
					<!-- <text class="section-more">更多活动</text> -->
				</view>
				<swiper class="promotion-swiper" autoplay interval="4000" duration="500" circular>
					<swiper-item v-for="(promotion, index) in promotions" :key="index">
						<view class="promotion-card">
							<image :src="promotion.image" mode="aspectFill" class="promotion-image"></image>
							<view class="promotion-info">
								<text class="promotion-title">{{ promotion.title }}</text>
								<text class="promotion-desc">{{ promotion.description }}</text>
								<view class="promotion-tag">{{ promotion.tag }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 新品推荐 - 网格布局 -->
			<view class="section new-products-section">
				<view class="section-header">
					<text class="section-title">新品推荐</text>
					<!-- <text class="section-more">查看全部</text> -->
				</view>

				<!-- 商品网格布局 -->
				<view class="products-grid">
					<view class="product-item" v-for="(product, index) in newProducts" :key="product.id"
						@click="navigateToDetail(product.id)">
						<image :src="product.picture" mode="aspectFill" class="product-image"></image>
						<view class="product-info">
							<text class="product-name">{{ product.tradeName }}</text>
							<view class="product-price-row">
								<text class="product-price">¥{{ product.prices }}</text>
								<text class="product-original-price"
									v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
							</view>
							<view class="product-tags">
								<view class="product-tag" v-for="(tag, tagIndex) in product.label" :key="tagIndex">
									{{ tag }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 页脚 -->
		<view class="footer">
			<view class="footer-container">
				<view class="row">
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关于我们</text>
							<text class="footer-link">公司简介</text>
							<text class="footer-link">发展历程</text>
							<text class="footer-link">联系方式</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">客户服务</text>
							<text class="footer-link">帮助中心</text>
							<text class="footer-link">售后政策</text>
							<text class="footer-link">投诉建议</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">商务合作</text>
							<text class="footer-link">商家入驻</text>
							<text class="footer-link">品牌合作</text>
							<text class="footer-link">营销中心</text>
						</view>
					</view>
					<view class="col-lg-3 col-md-6 col-sm-12">
						<view class="footer-section">
							<text class="footer-title">关注我们</text>
							<view class="social-links">
								<text class="social-icon iconfont icon-weixin"></text>
								<text class="social-icon iconfont icon-weibo"></text>
								<text class="social-icon iconfont icon-douyin"></text>
							</view>
							<text class="footer-contact">客服热线：400-123-4567</text>
						</view>
					</view>
				</view>
				<view class="copyright">
					<text>© 2025 宠物健康管家 All Rights Reserved</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		productApi
	} from '@/api/user.js'
	export default {
		components: {
			titleBar
		},
		data() {
			return {
				isScrolled: false,
				brands: [],
				promotions: [{
						id: 1,
						title: '春季大促',
						description: '全场商品低至5折，限时抢购',
						tag: '限时折扣',
						image: '/static/shop/spring.jpg'
					},
					{
						id: 2,
						title: '新人专享',
						description: '新用户注册即送100元优惠券',
						tag: '新人福利',
						image: '/static/shop/xinren.jpg'
					},
					{
						id: 3,
						title: '满减活动',
						description: '满300减50，满500减100',
						tag: '满减优惠',
						image: '/static/shop/manjian.jpg'
					}
				],
				newProducts: []
			}
		},
		mounted() {
			this.getGoods();
			this.getStores();
		},
		beforeDestroy() {},
		methods: {
			async getGoods() {
				try {
					const result = await productApi.getProductList()
					const products = result
					this.newProducts = products.slice(0, 4)
					// 修改这里 - 对每个商品对象单独处理标签
					this.newProducts.forEach(product => {
						product.label = product.label ? product.label.split(',') : [];
					});
					console.log('商品数据加载成功:', this.newProducts);
				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
				}
			},
			async getStores() {
				try {
					const result = await productApi.getStoreList()
					this.brands = result
					console.log('店铺数据加载成功:', this.brands);
				} catch (error) {
					uni.showToast({
						title: '获取店铺失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取店铺失败', error);
				}
			},
			goStore(brand) {
				getApp().globalData.currentStored = brand.id;
				uni.navigateTo({
					url: '/pages/shop/store'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			navigateToDetail(id) {
				getApp().globalData.currentGoodId = id;
				uni.navigateTo({
					url: `/pages/shop/goods?id=${id}`
				});
			},
		}
	}
</script>

<style scoped>
	@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css');

	/* 全局容器设置 */
	.container {
		max-width: 1200px;
		margin: 0 auto;
		margin-top: 100px;
		/* 减少顶部间距，与固定导航栏协调 */
		padding: 20px;
		background-color: #ffffff;
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	/* 顶部区域布局优化 */
	.top-section {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30px;
		flex-wrap: wrap;
		/* 允许在小屏幕上换行 */
	}

	/* 搜索区域响应式优化 */
	.search-section {
		width: 30%;
		min-width: 250px;
		/* 确保搜索区域有最小宽度 */
	}

	/* 品牌专区样式优化 */
	.brand-section {
		width: 100%;
		margin-bottom: 20px;
	}

	.brand-scroll {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #ccc #f5f5f5;
	}

	.brand-scroll::-webkit-scrollbar {
		height: 6px;
	}

	.brand-scroll::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 3px;
	}

	.brand-list {
		display: flex;
		padding: 10px 0;
		min-width: max-content;
		justify-content: space-between;
		/* 确保内容不被压缩 */
	}

	.brand-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20px;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.brand-item:hover {
		transform: translateY(-5px);
	}

	.brand-logo {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-bottom: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		object-fit: cover;
		/* 确保图片比例一致 */
	}

	.brand-name {
		font-size: 14px;
		color: #333;
		text-align: center;
		max-width: 80px;
		/* 限制名称宽度 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 公共部分样式优化 */
	.section {
		margin-bottom: 40px;
		background-color: white;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		border-left: 4px solid #FF6B6B;
		padding-left: 15px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.section-more {
		font-size: 14px;
		color: #999;
		cursor: pointer;
		transition: color 0.3s;
	}

	.section-more:hover {
		color: #FF6B6B;
	}

	/* 促销活动样式优化 */
	.promotion-swiper {
		height: 200px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.promotion-card {
		display: flex;
		height: 100%;
		background: white;
		overflow: hidden;
	}

	.promotion-image {
		width: 50%;
		height: 100%;
		object-fit: cover;
	}

	.promotion-info {
		display: flex;
		flex-direction: column;
		padding: 20px;
		position: relative;
		width: 50%;
	}

	.promotion-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.promotion-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.promotion-tag {
		position: absolute;
		bottom: 20px;
		left: 20px;
		background: #FF6B6B;
		color: white;
		font-size: 12px;
		padding: 4px 12px;
		border-radius: 20px;
		box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
	}

	/* 商品网格布局优化 */
	.products-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	/* 响应式布局优化 */
	@media screen and (max-width: 1200px) {
		.products-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media screen and (max-width: 992px) {
		.products-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.top-section {
			flex-direction: column;
		}

		.search-section,
		.brand-section {
			width: 100%;
		}

		.search-section {
			margin-bottom: 20px;
		}

		.logo {
			margin-left: 0;
		}

		.nav-categories {
			margin-left: 0;
		}
	}

	@media screen and (max-width: 768px) {
		.promotion-card {
			flex-direction: column;
		}

		.promotion-image,
		.promotion-info {
			width: 100%;
			height: 50%;
		}

		.promotion-swiper {
			height: 300px;
		}

		.navbar-center {
			flex-direction: column;
		}

		.search-container {
			margin-top: 10px;
		}
	}

	@media screen and (max-width: 576px) {
		.products-grid {
			grid-template-columns: 1fr;
		}
	}

	.product-item {
		background: white;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s, box-shadow 0.3s;
		cursor: pointer;
	}

	.product-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.product-info {
		padding: 16px;
	}

	.product-name {
		font-size: 15px;
		color: #333;
		margin-bottom: 10px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		height: 40px;
	}

	.product-price-row {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.product-price {
		font-size: 18px;
		font-weight: bold;
		color: #FF6B6B;
	}

	.product-original-price {
		font-size: 13px;
		color: #999;
		text-decoration: line-through;
		margin-left: 10px;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.product-tag {
		font-size: 12px;
		color: #FF6B6B;
		background-color: rgba(255, 107, 107, 0.1);
		padding: 3px 8px;
		margin-right: 6px;
		margin-bottom: 4px;
		border-radius: 4px;
	}

	/* 页脚样式优化 */
	.footer {
		margin-top: 50px;
		background-color: #131917;
	}

	.footer-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px 20px 20px;
		color: #fff;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
	}

	.col-lg-3,
	.col-md-6,
	.col-sm-12 {
		padding: 0 15px;
		box-sizing: border-box;
	}

	.col-lg-3 {
		width: 25%;
	}

	@media screen and (max-width: 992px) {
		.col-md-6 {
			width: 50%;
		}
	}

	@media screen and (max-width: 576px) {
		.col-sm-12 {
			width: 100%;
		}
	}

	.footer-section {
		margin-bottom: 30px;
	}

	.footer-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		display: block;
		position: relative;
		padding-bottom: 10px;
	}

	.footer-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50px;
		height: 2px;
		background-color: #F9CB43;
	}

	.footer-link {
		display: block;
		margin-bottom: 10px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.footer-link:hover {
		color: #F9CB43;
		padding-left: 5px;
	}

	.social-links {
		display: flex;
		margin-bottom: 15px;
	}

	.social-icon {
		font-size: 20px;
		margin-right: 20px;
		color: #bbb;
		transition: all 0.3s;
		cursor: pointer;
	}

	.social-icon:hover {
		color: #F9CB43;
		transform: scale(1.2);
	}

	.footer-contact {
		color: #bbb;
		font-size: 14px;
	}

	.copyright {
		text-align: center;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #444;
		color: #bbb;
		font-size: 14px;
	}
</style>